<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <canvas></canvas>

</body>
<script>
  let canvas = document.querySelector("canvas")
  //设置画布宽高
  canvas.width = 600;
  canvas.height = 400;
  //获取上下文
  let ctx = canvas.getContext("2d")

  //设置填充色
  ctx.fillStyle = "red"

  //设置起始坐标
  let x = 0, y = 0;

  //控制方向 true:正向  false:反向
  let yTag = true, xTag = true;

  setInterval(() => {
    //清除原来位置
    ctx.clearRect(x, y, 50, 50)

    /**********设置前进方向****************/
    //控制矩形x轴前进方向
    if (xTag) {
      x++
    } else {
      x--
    }

    //控制矩形y轴前进方向
    if (yTag) {
      y++
    } else {
      y--
    }

    /*********设置边界************/
    //达到下边界的时候，转向
    if (yTag == true && y >= 350) {
      yTag = false
    }

    //达到上边界的时候，转向
    if (yTag == false && y <= 0) {
      yTag = true;
    }

    //达到右边界的时候，转向
    if (xTag == true && x >= 550) {
      xTag = false
    }

    //达到左边界的时候，转向
    if (xTag == false && x <= 0) {
      xTag = true
    }

    ctx.fillRect(x, y, 50, 50)
  }, 10)

</script>

</html>